<template>
    <div class="jd-register">
        <JdHeader title="注册" back>
        </JdHeader>

        <!-- 书写一个步骤条 -->
        <van-steps class="steps" :active="active" finish-icon="like - 0">
            <van-step>手机号验证</van-step>
            <van-step>验证码验证</van-step>
            <van-step>填写密码</van-step>
            <van-step>注册完成</van-step>
        </van-steps>

        <!-- 每一个步骤的内容 -->
        <!-- 步骤一：验证手机号是否被注册过 -->
        <div v-if="active === 0" class="step0 step-item">
            <!-- 表单填写手机号 -->
            <van-form class="login-form" @submit="checkPhoneHandler">
                <van-cell-group inset>
                    <van-field v-model="phone" name="手机号" label="手机号" placeholder="手机号"
                        :rules="[{ required: true, message: '请填写手机号', pattern: /\d{11}/ }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        验证
                    </van-button>
                </div>
            </van-form>
        </div>

        <!-- 获取验证码并验证验证码正确性 -->
        <div v-if="active === 1" class="step1 step-item">
            <van-form class="login-form" @submit="checkCodeHandler">
                <van-cell-group inset>
                    <van-field v-model="code" center clearable placeholder="请输入短信验证码"
                        :rules="[{ required: true, message: '请填写验证码' }]">
                        <template #button>
                            <van-button :disabled="codeBtn" @click="sendCodeHandler" size="small"
                                type="primary">发送验证码</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        验证
                    </van-button>
                </div>
            </van-form>
        </div>
        <div v-if="active === 2" class="step2 step-item">
            <!-- 表单填写两次密码 -->
            <van-form class="login-form" @submit="registerHandler">
                <van-cell-group inset>
                    <van-field v-model="password" name="密码" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                    <van-field v-model="rpwd" name="重复密码" label="重复密码" placeholder="重复密码"
                        :rules="[{ required: true, message: '请填写重复密码' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>
        <!-- 完成注册 -->
        <div v-if="active === 3" class="step3 step-item">
            <van-icon class="finish" name="passed" />
            <router-link to="./login">
                <van-button type="success">去登录</van-button>
            </router-link>

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 导入相关请求接口
import { checkPhoneApi, sendCodeApi, checkCodeApi, registerApi } from '@/api/users'
// 导入 vant 的 Dialog弹出层
import { Toast, Notify } from 'vant';

// 准备一个变量,表示步骤条数据
const active = ref<number>(0)

// 验证手机号
const phone = ref<string>('13623507912')
const checkPhoneHandler = async () => {
    console.log('提交手机号验证');
    const res = await checkPhoneApi(phone.value)
    // console.log(res.code);
    console.log(res);


    // 判断结果
    // 表示
    if (((res as unknown) as { code: string }).code === '200') {
        // 继续下一步
        // 调整active就可以了
        active.value++
        return
    }

    // 代码执行到这里说明手机号不行
    Toast({
        message: '手机号已被注册',
        icon: 'phone-circle-o',
    })

}
// 发送验证码是否禁用
const codeBtn = ref<boolean>(false)
//验证验证码
const code = ref<string>('53119')

// 发送验证码
const sendCodeHandler = async () => {
    codeBtn.value = true
    // 发送验证码到你的手机号(phone)
    const res = await sendCodeApi(phone.value)

    console.log(res);

}

// 验证验证码
const checkCodeHandler = async () => {
    console.log('验证验证码');
    // // 成功通知
    // Notify({ type: 'success', message: '验证成功' })
    const res = await checkCodeApi(phone.value, code.value)
    console.log(res);

    // 判断结果
    // 表示可以继续
    if (((res as unknown) as { code: string }).code === '200') {
        // 继续下一步
        // 调整active就可以了
        active.value++
        return
    }

    // 代码执行到这里说明手机号不行
    Toast({
        message: '验证码错误',
        icon: 'phone-o',
    })

}

// 采集密码
const password = ref<string>('')
const rpwd = ref<string>('')
// 提交的方法
const registerHandler = async () => {
    // 1.两次密码不一致
    if (password.value !== rpwd.value) return Toast({
        message: '两次密码不一致',
        icon: 'phone-circle-o',
    })

    // 2.发送请求
    const res = await registerApi(phone.value, password.value)
    console.log(res);

    // 判断结果
    // 表示可以继续
    if (((res as unknown) as { code: string }).code === '200') {
        // 继续下一步
        // 调整active就可以了
        active.value++
        return
    }

    // 代码执行到这里说明手机号不行
    Toast({
        message: '注册失败,请重试',
        icon: 'phone-o',
    })

}


</script>
<style scoped lang="scss">
.jd-register {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .steps {
        width: 80%;
    }

    .step-item {
        width: 80%;
        height: 200px;
        border: 1px solid #333;
        border-radius: 10px;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}

.finish {
    font-size: 80px;
    color: rgb(106, 211, 106);
}
</style>